<!--  -->
<template>
    <div class="menus">

        <div class="item" :class="{ checked: item.url == currentUrl }" @click="navigate(item.url!)" v-for="item in leftMenu"
            :key="item.id">
            <i class="iconfont" :class="item.ico"></i>
            <label for="">{{ item.name.substring(0, 2) }}</label>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { useRouter, useRoute } from 'vue-router'
import { Menu } from '../../service/menu/type'
import { reactive, ref, watch } from 'vue'
import { useUserStore } from '../../store/user';
import { storeToRefs } from 'pinia';
const router = useRouter();
const route = useRoute();

const store=useUserStore();
const {menus,token} =storeToRefs(store);
 
let menuList =menus.value as Array<Menu>;

  
const leftMenu = ref<Array<Menu>>([]);

leftMenu.value = menuList.filter(item => item.pid === 0 && item.postion == "left");

const navigate = (url: string) => {
    router.push(url);
}
const currentUrl = ref("");

watch(() => route.path, (newValue, oldValue) => {
    currentUrl.value = route.path;

}, { immediate: true })





</script>
<style scoped lang="less">
.menus {
    height: 100%;
    box-sizing: border-box;
    padding-top: 20px;

    .item {
        display: flex;
        height: 50px;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10px;
        box-sizing: border-box;
        font-size: 13px;
        cursor: pointer;

        i {
            font-size: 28px;
            color: #727e96;

            &.icon-wuyeguanli {
                font-size: 34px;
            }

            &.icon-qitafeiyong {
                font-size: 24px;
            }

            &.icon-tupian {
                font-size: 24px;
            }

            &.icon-mendian {
                font-size: 24px;
            }
        }

        label {
            margin-top: 2px;
            cursor: pointer;
        }

        &.checked {
            i {
                color: #417ff4;
            }

            color:#417ff4;
            position: relative;

            &::before {
                content: '';
                width: 5px;
                height: 100%;
                background: #417ff4;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
    }
}
</style>